<script setup>
import LayoutNav from '../Layout/components/LayoutNav.vue';
import LayoutFooter from '../Layout/components/LayoutFooter.vue';
import router from '@/router';
import { ref } from 'vue';

const conversations = ref([
      { id: 1, title: '会话1', messages: [] },
      { id: 2, title: '会话2', messages: [] },
      { id: 3, title: '会话3', messages: [] }
]);

const selectedConversation = ref(conversations.value[0]);
const newMessage = ref('');
const selectConversation = (conversation) => {
      selectedConversation.value = conversation;
    };

const sendMessage = () => {
  if (newMessage.value.trim()) {
    selectedConversation.value.messages.push({ sender: 'customer', text: newMessage.value });
    newMessage.value = '';
    scrollToBottom();
  }
};

const scrollToBottom = () => {
  const messagesContainer = document.querySelector('.messages');
  messagesContainer.scrollTop = messagesContainer.scrollHeight;
};


</script>
<template>
  <LayoutNav/>
  <div class="container">
    <div class="header">
      <div class="back"><span @click="router.back();">
        <i class="iconfont icon-angle-left"></i>
        <i class="iconfont icon-angle-left"></i>
        返回商品页面
      </span></div>
      <div class="shop-contain">
        <el-avatar :size="50" :src="circleUrl" />
        tb1326587656
      </div>
    </div> 
    <div class="main">
      <div class="side">
        <ul class="conversation-list">
          <li v-for="(conversation, index) in conversations" :key="index" @click="selectConversation(conversation)">
            {{ conversation.title }}
          </li>
        </ul>
      </div>
      <div class="chat-box">
        <div class="messages" ref="messages">
          <div v-for="(message, index) in selectedConversation.messages" :key="index" :class="['message', message.sender]">
            {{ message.text }}
          </div>
        </div>
        <div class="input-area">
          <input v-model="newMessage" @keyup.enter="sendMessage" placeholder="输入消息..." />
          <button @click="sendMessage">发送</button>
        </div>
      </div>
    </div>
  </div>
  <LayoutFooter/>
</template>

<style scoped lang='scss'>
.header{
  background: 100%;
  width: 100%;
}
.main {
  display: flex;
  background: #fff;
  height: 600px;
  // height: 100vh;
}

.side {
  width: 250px;
  background-color: #f4f4f4;
  padding: 20px;
  border-right: 1px solid #ddd;
}

.conversation-list {
  list-style-type: none;
  padding: 0;
}

.conversation-list li {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #ddd;
}

.conversation-list li:hover {
  background-color: #e6f7ff;
}

.chat-box {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.messages {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px;
  border-bottom: 1px solid #ddd;
}

.message {
  margin: 10px 0;
  padding: 10px;
  border-radius: 5px;
}

.message.customer {
  background-color: #e6f7ff;
  align-self: flex-start;
}

.message.agent {
  background-color: #d9f7e6;
  align-self: flex-end;
}

.input-area {
  display: flex;
  padding: 10px;
}

.input-area input {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-right: 10px;
}

.input-area button {
  padding: 10px 20px;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

.input-area button:hover {
  background-color: #0056b3;
}
</style>